<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页特效 兼容性很好的拖拽窗口放大缩小特效 ab蓝学网</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    #www_ablanuxe_com {
      width: 100%;
      height: 100%;
      background: #f00;
      /* filter: alpha(opacity:0); */
      opacity: 0;
      z-index: 9999;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }

    #ablanuxe_com_2 {
      width: 200px;
      height: 200px;
      position: relative;
      background: #EEEEEE;
      border: 1px solid #f00;
    }

    #www_ablanuxe_com_1 {
      width: 15px;
      height: 15px;
      background: #99CC00;
      position: absolute;
      right: 0px;
      bottom: 0px;
      cursor: nw-resize;
      overflow: hidden;
      font-size: 12px;
      text-align: center;
      line-height: 15px;
      color: #FFFFFF;
      float: right;
      z-index: 3;
    }

    #right {
      width: 15px;
      height: 100%;
      background: #f00;
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      cursor: e-resize;
      overflow: hidden;
      /* filter: alpha(opacity:0); */
      opacity: 0;
      z-index: 1;
    }

    #bottom {
      width: 100%;
      height: 15px;
      background: #f00;
      position: absolute;
      left: 0;
      bottom: 0;
      cursor: n-resize;
      overflow: hidden;
      /* filter: alpha(opacity:0); */
      opacity: 0;
      z-index: 1;
    }

    #ablanuxe_com_2 p {
      padding: 10px;
      line-height: 24px;
      font-size: 13px;
      text-indent: 24px;
      color: #996600;
    }

    #ablanuxe_com_2 h2 {
      width: 100%;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      background: #CC9900;
      color: #FFFFFF;
      text-indent: 15px;
      cursor: move;
      overflow: hidden;
    }
  </style>
  
</head>

<body>
  <div id="ablanuxe_com_2">
    <div style="width:100%;height:100%;overflow:hidden;">
      <h2>ab蓝学网div放大缩小拖拽特效</h2>
      <p>ab蓝学网div放大缩小拖拽特效，ab蓝学网,最全js网页特效代码,广告图片切换|图片轮播代码,js特效大全,图片代码,手机网站android开发教程|js广告代码,网页代码大全,js教程,也提供性感美女桌面壁纸下载.
      </p>
      <div id="right" onmousedown="rightonmousedown"></div>
      <div id="www_ablanuxe_com_1">拖</div>
      <div id="bottom"></div>
      <div id="www_ablanuxe_com"></div>
    </div>
  </div>


  <script >
      //往右拽
      function rightonmousedown (ev) {
          console.log('οnmοusedοwn');
        var oEvent = ev || event;
        oEvent.preventDefault();
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        console.log('mouseStart:',mouseStart);
        rightStart.x = right.offsetLeft;
        console.log('right.setCapture:',right.setCapture);
        if (right.setCapture) {
          right.οnmοusemοve = doDrag1;
          right.οnmοuseup = stopDrag1;
          right.setCapture();
        } else {
          document.addEventListener("mousemove", doDrag1, true);
          document.addEventListener("mouseup", stopDrag1, true);
        }
      };
    window.onload = function () {
        console.log('onload');
      var oDiv = document.getElementById("www_ablanuxe_com_1");
      var oDiv2 = document.getElementById("ablanuxe_com_2");
      var zhezhao = document.getElementById("www_ablanuxe_com");
      var h2 = oDiv2.getElementsByTagName("h2")[0];
      var right = document.getElementById("right");
      var bottom = document.getElementById("bottom");
      var mouseStart = {};
      var divStart = {};
      var rightStart = {};
      var bottomStart = {};
      console.log('right:',right);
     
      //往右拽
      right.onmousedown = function (ev) {
          console.log('οnmοusedοwn');
        var oEvent = ev || event;
        oEvent.preventDefault();
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        console.log('mouseStart:',mouseStart);
        rightStart.x = right.offsetLeft;
        console.log('right.setCapture:',right.setCapture);
        if (right.setCapture) {
          right.οnmοusemοve = doDrag1;
          right.οnmοuseup = stopDrag1;
          right.setCapture();
        } else {
          document.addEventListener("mousemove", doDrag1, true);
          document.addEventListener("mouseup", stopDrag1, true);
        }
      };
       

      function doDrag1(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + rightStart.x;
        var w = l + oDiv.offsetWidth;
        if (w < oDiv.offsetWidth) {
          w = oDiv.offsetWidth;
        } else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
          w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
        }
        oDiv2.style.width = w + "px";
      };

      function stopDrag1() {
        if (right.releaseCapture) {
          right.οnmοusemοve = null;
          right.οnmοuseup = null;
          right.releaseCapture();
        } else {
          document.removeEventListener("mousemove", doDrag1, true);
          document.removeEventListener("mouseup", stopDrag1, true);
        }
      };
      //往下拽
      bottom.οnmοusedοwn = function (ev) {
        var oEvent = ev || event;
        oEvent.preventDefault();
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        bottomStart.y = bottom.offsetTop;
        if (bottom.setCapture) {
          bottom.οnmοusemοve = doDrag2;
          bottom.οnmοuseup = stopDrag2;
          bottom.setCapture();
        } else {
          document.addEventListener("mousemove", doDrag2, true);
          document.addEventListener("mouseup", stopDrag2, true);
        }
      };

      function doDrag2(ev) {
        var oEvent = ev || event;
        var t = oEvent.clientY - mouseStart.y + bottomStart.y;
        var h = t + oDiv.offsetHeight;
        if (h < oDiv.offsetHeight) {
          h = oDiv.offsetHeight;
        } else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
          h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
        }
        oDiv2.style.height = h + "px";
      };

      function stopDrag2() {
        if (bottom.releaseCapture) {
          bottom.οnmοusemοve = null;
          bottom.οnmοuseup = null;
          bottom.releaseCapture();
        } else {
          document.removeEventListener("mousemove", doDrag2, true);
          document.removeEventListener("mouseup", stopDrag2, true);
        }
      };
      //往左右同时拽
      oDiv.οnmοusedοwn = function (ev) {
          console.log('往左右同时拽');
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = oDiv.offsetLeft;
        divStart.y = oDiv.offsetTop;
        if (oDiv.setCapture) {
          oDiv.οnmοusemοve = doDrag;
          oDiv.οnmοuseup = stopDrag;
          oDiv.setCapture();
        } else {
          document.addEventListener("mousemove", doDrag, true);
          document.addEventListener("mouseup", stopDrag, true);
        }
        zhezhao.style.display = 'block';
      };

      function doDrag(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;
        var w = l + oDiv.offsetWidth;
        var h = t + oDiv.offsetHeight;
        if (w < oDiv.offsetWidth) {
          w = oDiv.offsetWidth;
        } else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
          w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
        }
        if (h < oDiv.offsetHeight) {
          h = oDiv.offsetHeight;
        } else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
          h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
        }
        oDiv2.style.width = w + "px";
        oDiv2.style.height = h + "px";
      };

      function stopDrag() {
        if (oDiv.releaseCapture) {
          oDiv.οnmοusemοve = null;
          oDiv.οnmοuseup = null;
          oDiv.releaseCapture();
        } else {
          document.removeEventListener("mousemove", doDrag, true);
          document.removeEventListener("mouseup", stopDrag, true);
        }
        zhezhao.style.display = 'none';
      };
      //h2完美拖拽
      h2.οnmοusedοwn = function (ev) {
        var oEvent = ev || event;
        mouseStart.x = oEvent.clientX;
        mouseStart.y = oEvent.clientY;
        divStart.x = oDiv2.offsetLeft;
        divStart.y = oDiv2.offsetTop;
        if (h2.setCapture) {
          h2.οnmοusemοve = doDrag3;
          h2.οnmοuseup = stopDrag3;
          h2.setCapture();
        } else {
          document.addEventListener("mousemove", doDrag3, true);
          document.addEventListener("mouseup", stopDrag3, true);
        }
        zhezhao.style.display = 'block';
      };

      function doDrag3(ev) {
        var oEvent = ev || event;
        var l = oEvent.clientX - mouseStart.x + divStart.x;
        var t = oEvent.clientY - mouseStart.y + divStart.y;
        if (l < 0) {
          l = 0;
        } else if (l > document.documentElement.clientWidth - oDiv2.offsetWidth) {
          l = document.documentElement.clientWidth - oDiv2.offsetWidth;
        }
        if (t < 0) {
          t = 0;
        } else if (t > document.documentElement.clientHeight - oDiv2.offsetHeight) {
          t = document.documentElement.clientHeight - oDiv2.offsetHeight;
        }
        oDiv2.style.left = l + "px";
        oDiv2.style.top = t + "px";
      }; //欢迎来到站长特x效网，我们的网址是 www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
      function stopDrag3() {
        if (h2.releaseCapture) {
          h2.οnmοusemοve = null;
          h2.οnmοuseup = null;
          h2.releaseCapture();
        } else {
          document.removeEventListener("mousemove", doDrag3, true);
          document.removeEventListener("mouseup", stopDrag3, true);
        }
        zhezhao.style.display = 'none';
      }
    };

  </script>
</body>

</html>

